<template>
	<view class="container">
		<view class="map-search">
			<view class="search-box">
				<!-- <template v-if="!mapData.isFocus">
					<view class="">武汉市</view>
					<view >{{city.slice(0,4)}}</view>
					<view v-if="city.length>=5">...</view>
					<view class="search-box-jt">
						<uni-icons type="down" size="20"></uni-icons>
					</view>
					<view class="search-box-sx">|</view>
				</template> -->

				<uni-icons type="search" size="20"></uni-icons>
				<!-- <image class="search-box-fdj" src="/static/images/stemCells/runsheng_two/search.png" mode=""></image> -->
				<input @focus="focus" @blur="blur" @confirm="_confirm" maxlength="80" confirm-type="search"
					class="search-box-srk"  v-model="mapData.search" type="text" placeholder="输入地址或门店名称" />

				<uni-icons type="closeempty" size="20" @tap="clearInput" v-if="mapData.search.trim()"></uni-icons>
				<!-- <image @click="clearInput" v-if="mapData.search.trim()" class="search-box-c"
					src="/static/images/close_black_icon.png" mode=""></image> -->
			</view>
		</view>
		<view :style="{width:'100%', height: '336rpx',marginLeft:mapData.marginLeft}">
			<map style="width: 100%; height: 336rpx;" :latitude="mapData.latitude" :longitude="mapData.longitude"
				:markers="mapData.covers">
			</map>
		</view>
		<view class="studio_list" v-if="studioList.length>0">
			<scroll-view :scroll-y="true" class="area-scroll" @scrolltolower="lower">
				<view class="list_content">
					<view class="content_box" v-for="(studioItem,studioIndex) in studioList" :key="studioIndex"
						@tap="selectedStudio(studioItem)">
						<view class="studio_img">
							<image :src="studioItem.avatar" mode=""></image>
						</view>
						<view class="studio_text">
							<view class="studio_text_name">{{studioItem.name}}</view>
							<view class="studio_text_tips">{{studioItem.introduce}}</view>
							<view class="studio_text_address">

								<text class="studio_text_address_km">距您 {{
								                Number(studioItem.linearDistance) >= 1000 ? (new
								                BigNumber(studioItem.linearDistance).div(1000).toNumber().toFixed(2)) + 'KM' : studioItem.linearDistance + 'M'
								              }}</text>
								<text class="studio_text_address_splice"></text>
								<text
									class="studio_text_address_detail">{{studioItem.province}}{{studioItem.city}}{{studioItem.area}}{{studioItem.address}}</text>
							</view>
						</view>
						<view class="studio_btn">
							<image :src="studioItem.isShow ? url + 'icon-13.png' : url + 'icon-12.png'" mode=""></image>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		<view v-else-if="mapData.isFirst" class="map-nostore">
			<template v-if="mapData.isSearch">
				<view class="">
					<text>抱歉，暂时没有搜索到相关工作室</text>
				</view>
				<!-- <ct-empty type="name=Store"
					title="抱歉，暂时没有搜索到相关门店" /> -->
			</template>
			<!-- <template v-else>
				<ct-empty @click="mapData.openAreaList" type="name=Store"
					title="很抱歉，当前城市暂未开放门店～" tips="选择其它城市看看吧。" btnText="切换城市" />
			</template> -->
		
		</view>
		<view class="area-btn">
			<view class="area-btn_box" @tap="goUrl()">确定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import api from '@/api'
	import config from '@/config'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { getLocation } from '@/hooks/useFunction'
	import BigNumber from "bignumber.js";
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	const mapData = reactive<{
		search : string
		loading : string
		page : number
		limit : number
		blankShow : boolean
		isFocus : boolean
		city : string
		latitude : number
		longitude : number
		marginLeft : number
		location : number | string
		covers : object,
		total : number,
		isFirst : boolean,
		isSearch : boolean
	}>({
		search: '',
		loading: 'more',
		page: 1,
		limit: 20,
		blankShow: false,
		isFocus: false,
		city: '',
		latitude: 0,
		longitude: 0,
		marginLeft: 0,
		location: 0,
		covers: [],
		total: 0,
		isFirst: false,
		isSearch: false
	})
	const recordId = ref('')
	const studioList = ref([])
	const studioItem = ref({})
	onLoad((options) => {
		if(options.recordId) {
			recordId.value = options.recordId
		}
		//console.log(getLocation())
		getStoreList(0)

	})
	const updataCover = () => {
		mapData.covers = []
		/* studioList.value.forEach((item, index) => {
			let iconPath = require('@/static/images/position_icon@2x-blank.png')
			if (item.id == mapData.chooseStore.id) {
				iconPath = require('@/static/images/position_icon@2x.png')
			}
			mapData.covers.push({
				id: item.id,
				latitude: item.latitudeLongitude.split(',')[1],
				longitude: item.latitudeLongitude.split(',')[0],
				iconPath: iconPath,
				width: 30,
				height: 30
			})


		}) */
	}
	const getStoreList = async (isSearch) => {
		let lacat : any = await getLocation()

		if (lacat) {
			mapData.latitude = lacat.latitude
			mapData.longitude = lacat.longitude
			const res : any = await api({
				method: 'get',
				url: `/mall/studio/recommendPage`,
				data: {
					page: mapData.page,
					limit: 10,
					longitudes: lacat.longitude,
					latitudes: lacat.latitude,
					content: mapData.search
				}
			})

			studioList.value = studioList.value.concat(res.data.records)
			studioList.value.forEach((item) => {
				item.isShow = false
			})
			//this.storeList = this.storeList.concat(res.data.records)
			mapData.total = res.data.total
			mapData.covers = []
			if (studioList.value.length > 0) {
				/* mapData.latitude = mapData.storeList[0].latitudeLongitude.split(',')[1]
				mapData.longitude = mapData.storeList[0].latitudeLongitude.split(',')[0]
				this.updataCover() */
			}

			uni.hideLoading()
			mapData.isFirst = true
			mapData.isSearch = isSearch ? true : false
		}
	}
	const selectedStudio = (value) => {
		/* if(value.linearDistance > 200000) {
			
		} */
		studioList.value.forEach((item) => {
			if (item.id == value.id) {
				item.isShow = true
				studioItem.value = item
			} else {
				item.isShow = false
			}
		})
	}
	const _confirm = (e) => {
		if (e.detail.value.trim().length == 0) {
			//this.$msg.toast('请输入关键词后再搜索')
			return
		}
		mapData.search = e.detail.value.trim()
		mapData.page = 1
		//this.cityId = ""
		//this.city = "全国"
		studioList.value = []
		getStoreList(1)
	}
	const focus = () => {
		mapData.isFocus = true
		/* this.isFocus = true */
	}
	const blur = () => {
		if (mapData.search.trim().length == 0) {
			mapData.isFocus = false
			mapData.page = 1
			mapData.search = ''

		}
		if (mapData.search.trim().length == 0) {
			mapData.isFocus = false

			mapData.page = 1
			mapData.search = ""
			studioList.value = []
			getStoreList(0)
		}

	}
	const clearInput = () => {
		mapData.isFocus = false
		mapData.page = 1
		mapData.search = ''
		mapData.isFocus = false

		mapData.page = 1
		mapData.search = ""
		studioList.value = []
		getStoreList(0)
	}
	const lower = () => {
		if (mapData.total == studioList.value.length) {
			//this.$msg.toast('没有更多门店了')
			uni.showToast({
				title: '没有更多工作室了',
				icon: 'none'
			})
			return
		}
		mapData.page++
		getStoreList(0)
	}
	const goUrl = () => {
		
		if (studioItem.value && studioItem.value.linearDistance) {
			if(Number(studioItem.value.linearDistance)  > 20000) {
				uni.showModal({
					title: '确定是这家工作室吗？',
					content:'注意：您当前所在位置距离该工作室较远',
					success: async (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: `/pages/applyPetTeacher/submitInfo/submitInfo?id=${studioItem.value.id}&recordId=${recordId.value}`
							})
						} else if (res.cancel) {
				
						}
					}
				})
			} else {
				uni.navigateTo({
					url: `/pages/applyPetTeacher/submitInfo/submitInfo?id=${studioItem.value.id}&recordId=${recordId.value}`
				})
			}
			
		} else {
			uni.showToast({
				title: '请选择工作室',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.map-search {
		height: 88rpx;
		background-color: #fff;
		width: 100%;
		padding: 8rpx 32rpx;
		box-sizing: border-box;

		.search-box {
			background-color: #F5F6F7;
			border-radius: 50rpx;
			height: 72rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			position: relative;

			.search-box-jt {
				margin: 5rpx 18rpx 0 10rpx;
			}

			.search-box-sx {
				margin: 0 18rpx 0 0;
				color: #CACCCC;
				font-weight: bold;
			}

			.search-box-fdj {
				width: 40rpx;
				height: 40rpx;
				margin: 0 30rpx 0 0;
			}

			.search-box-srk {
				font-size: 30rpx;
				width: 80%;
			}

			.search-box-c {
				width: 42rpx;
				height: 42rpx;
				position: absolute;
				right: 32rpx;
				top: 15rpx;
			}
		}
	}




	.studio_list {
		height: calc(100vh - 510rpx + 86rpx - 90rpx);
		//#ifdef H5
		height: calc(100vh - 598rpx + 86rpx);
		//#endif

		padding: 20rpx 0 calc(constant(safe-area-inset-bottom) + 10rpx);
		padding: 20rpx 0 calc(env(safe-area-inset-bottom) + 10rpx);
		box-sizing: border-box;
		.area-scroll {
			height: calc(100%);
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.list_content {

			.content_box {
				width: 686rpx;
				margin: 0 auto;
				margin-top: 24rpx;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 24rpx;
				display: flex;
				justify-content: space-between;

				.studio_img {
					image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 24rpx;
					}
				}

				.studio_text {
					width: 430rpx;

					.studio_text_name {
						margin-bottom: 30rpx;
						font-size: 36rpx;
						color: #1B2120;
						font-weight: bold;
						line-height: 1;
					}

					.studio_text_tips {
						margin-bottom: 26rpx;
						font-size: 24rpx;
						color: #5C5E5E;
						line-height: 1.4;
					}

					.studio_text_address {
						font-size: 24rpx;
						line-height: 1.4;

						.studio_text_address_km {
							color: #5C5E5E;
							font-weight: bold;
						}

						.studio_text_address_splice {
							margin: 0 8rpx;
							display: inline-block;
							width: 2rpx;
							height: 20rpx;
							background-color: #7C807F;
						}

						.studio_text_address_detail {

							color: #7C807F;
						}
					}
				}

				.studio_btn {
					width: 48rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}
				}
			}

		}
	}

	.area-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(var(--safe-area-bottom));
		line-height: 1;

		.area-btn_box {
			width: 686rpx;
			margin: 8rpx auto;
			padding: 30rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 62rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}
</style>